<?php 
	// Informamos el título
	$this->set('title_for_layout','Nueva cita');
	
	/**
	 * CSS
	 */
	$this->Html->css(array('datatables-bootstrap', '/plugin/jquery-ui-1.10.3/css/redmond/jquery-ui-1.10.3.custom.min'), null, array('inline' => false));
	
	/**
	 * Javascript
	 */
	$this->Html->script(array('/plugin/jquery-validation-1.11.1/dist/jquery.validate.min', '/plugin/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min', '/plugin/DataTables-1.9.4/media/js/jquery.dataTables', 'datatables-bootstrap'), array('inline' => false));
	//$this->Html->scriptBlock($this->AoaTable->obtener_configuracion_datatables("tablaLugares"), array('inline' => false));
	
	// Menu
	$this->start('menu');		
	echo $this->element('/menu');
	$this->end(); 
?>

<style>
	.input-mini {
	  width: 40px;
	}
	#tablaLugares_paginate {
		text-align: left;
	}
	.table-hover tbody tr:hover > td{
		cursor: pointer;
	}
	.ui-widget-content {
		border: 1px solid #CCCCCC;
	    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
		border-radius: 4px 4px 4px 4px;
	    color: #555555;
	    font-size: 14px;
	    line-height: 20px;
	    padding: 4px 6px;
	}
</style>

<script type="text/javascript">
<!--

	$(document).ready(function() {

		/* INICIO especie */
		$("#especie").autocomplete({
			source: function( request, response ) {
				$.getJSON( "/aoa/cita/buscar_especies", {
					term: request.term
				}, 
				response );
			},
			minLength: 3,
			select: function( event, ui ) {
				this.value = ui.item.value;
				$("#especieId").val(ui.item.id);
				return false;
			}
		});
		/* FIN especie */

		/* INICIO fecha alta */
		$( "#fechaAlta" ).datepicker({
			dateFormat: "dd/mm/yy", 
			monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
			monthNamesShort: [ "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ],
			dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
			firstDay: 1
		});
		/* FIN fecha alta */

		/* INICIO Tabla de lugares */
		var asInitVals = new Array();
		var oTable;

		/* Add a click handler to the rows - this could be used as a callback */
	    $("#tablaLugares tbody tr").click( function( e ) {
		    // Deseleccionar
	        if ( $(this).hasClass('row_selected') ) {
	            $(this).removeClass('row_selected');
	            
	            $("#lugarId").val("");
	            $("#lugar").val("");
	        }
	        // Seleccionar
	        else {
	            oTable.$('tr.row_selected').removeClass('row_selected');
	            $(this).addClass('row_selected');
	            
	            $("#lugarId").val($(this).attr("id"));

	            var textoLugar = "";
	            $("#tablaLugares tbody tr.row_selected td").each(function(){
	            	textoLugar = textoLugar + $(this).html() + ", ";
				});
				
	            $("#lugar").val(textoLugar.substring(0, textoLugar.length - 2));
	        }
	    });
	     
		oTable = $("#tablaLugares").dataTable({
			"sDom": "<'row'<'span3'l><'span5'f>r>t<'row'<'span3'i><'span5'p>>",
			"sWrapper": "dataTables_wrapper form-inline",
			"bPaginate": true,
			"sPaginationType": "bootstrap",
	        "bLengthChange": false,
	        "bFilter": true,
	        "bSort": true,
	        "bInfo": false,
	        "bAutoWidth": true,
	        "oLanguage": {
				"oPaginate": {
			       	"sNext": "<?php echo __("Siguiente");?>",
			       	"sPrevious": "<?php echo __("Anterior");?>"
			    },
			    "sZeroRecords": "No se han encontrado coincidencias."
			}
		});

		$("tfoot input").keyup( function () {
			/* Filter on the column (the index) of this element */
			oTable.fnFilter( this.value, $("tfoot input").index(this) );
		} );

		$("tfoot input").each( function (i) {
			asInitVals[i] = this.value;
		} );
		
		$("tfoot input").focus( function () {
			if ( this.className == "search_init" )
			{
				this.className = "";
				this.value = "";
			}
		} );
		$("tfoot input").blur( function (i) {
			if ( this.value == "" )
			{
				this.className = "search_init";
				this.value = asInitVals[$("tfoot input").index(this)];
			}
		} );

		$("#tablaLugares_filter").hide();


		var popup = $('#modalLugares');
		popup.css({
			'left': ($(window).width() / 2 - $(popup).width() / 2) + 'px',
			'top': ($(window).height() / 2 - $(popup).height() / 2) + 'px',
			'margin-left': 0 + 'px'
		});

		/* FIN Tabla de lugares */

		/* INICIO Tabla de clases de edad/sexo */
		$(".input-mini").focus(function() {
			if($(this).val() == 0) {
				$(this).val("");
			}
		});
		$(".input-mini").blur(function() {
			if($(this).val() == "") {
				$(this).val(0);
			}
		});
		/* FIN Tabla de clases de edad/sexo */

		/* INICIO observadores*/
		$("#observadores").autocomplete({
			source: function( request, response ) {
				$.getJSON( "/aoa/cita/buscar_observadores", {
					term: request.term
				}, 
				response );
			},
			minLength: 3,
			select: function( event, ui ) {
				if(ui.item) {
					this.value = ui.item.value;
					insertarObservador(ui.item.value);
					var obsSel = $("#observadoresSeleccionados").val();
					if(obsSel == "") {
						obsSel = ui.item.id;
					}
					else {
						obsSel = obsSel + ", " + ui.item.id;
					}
					$("#observadoresSeleccionados").val(obsSel);
				}
				return false;
			}
		});

		$("#btnVaciarObservadores").click(function() {
			$("#listaObservadoresSeleccionados div").remove();
			$("#observadoresSeleccionados").val("");
			$("#observadores").val("");
		});
		/* FIN observadores*/
	});

	function insertarObservador( message ) {
		$( "<div>" ).text( message ).prependTo( "#listaObservadoresSeleccionados" );
		$( "#listaObservadoresSeleccionados" ).scrollTop( 0 );
	}
//-->
</script>

<!-- Cuerpo -->
<div>
    <fieldset>
        <legend><?php echo __('Nueva cita'); ?></legend>

		<form id="frmNuevaCita" class="form-horizontal">

			<!-- Especie-->
			<div class="control-group">
				<label class="control-label" for="especie"><?php echo __("Especie");?><br>(<?php echo __("Obligatorio");?>)</label>
				<div class="controls">
					<input id="especie" name="especie" class="input-xxlarge" type="text">
					<input type="hidden" id="especieId" name="especieId">
					<p class="help-block"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Escriba al menos tres letras.")?></p>
				</div>
			</div>

			<!-- Fecha alta-->
			<div class="control-group">
				<label class="control-label" for="fechaAlta"><?php echo __("Fecha");?><br>(<?php echo __("Obligatorio");?>)</label>
				<div class="controls">
					<div  class="input-append">
        				<input type="text" id="fechaAlta" name="fechaAlta" size="10" class="date-picker" style="width: auto;"/>
        				<label for="fechaAlta" class="add-on"><i class="icon-calendar"></i></label>
        			</div>
        			<p class="help-block"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Seleccione un día del calendario o escriba una fecha con formato ").date("d/m/Y")."."?></p>
				</div>
			</div>
			
			<!-- Lugar-->
			<div class="control-group">
				<label class="control-label" for="lugar"><?php echo __("Lugar");?><br>(<?php echo __("Obligatorio");?>)</label>
				<div class="controls">
        			<input type="text" id="lugar" name="lugar" class="input-xxlarge"/>
        			<a href="#modalLugares" role="button" class="btn" data-toggle="modal" id="btnSeleccionarLugar">Seleccionar lugar</a>
        			<input type="hidden" id="lugarId" name="lugarId">
        			<p class="help-block"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Seleccione un lugar de los que aparecen en la tabla. Si no existe el que busca, cree uno nuevo.");?></p>
				</div>
			</div>
			
			<!-- Número de aves-->
			<div class="control-group">
				<label class="control-label"><?php echo __("Número de aves");?><br>(<?php echo __("Obligatorio");?>)</label>
					<div class="controls">
						<table class="table table-striped table-bordered" style="width: 600px;">
							<thead>
								<tr>
									<td colspan="2" rowspan="2" class="caption"></td>
									<td colspan="100%" class="caption" style="text-align: center;">Edad</td>
								</tr>
								<tr>
									<th><?php echo __("Indeterminado");?></th>
									<th><?php echo __("Pollo");?></th>
									<th><?php echo __("Joven");?></th>
									<th><?php echo __("2º año");?></th>
									<th><?php echo __("3º año");?></th>
									<th><?php echo __("Inmaduro");?></th>
									<th><?php echo __("Subadulto");?></th>
									<th><?php echo __("Adulto");?></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td rowspan="3" class="caption" style="vertical-align:middle; text-align: center;">Sexo</td>
									<th><?php echo __("Indeterminado");?></th>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="20" name="indeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="10" name="polloIndeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="30" name="jovenIndeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="50" name="segundoAnioIndeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="70" name="tercerAnioIndeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="80" name="inmaduroIndeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="80" name="subadultoIndeterminado" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="90" name="adultoIndeterminado" value="0" /></td>
								</tr>
								<tr>
									<th><?php echo __("Macho");?></th>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="21" name="indeterminadoMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="11" name="polloMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="31" name="jovenMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="51" name="segundoAnioMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="71" name="tercerAnioMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="81" name="inmaduroMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="81" name="subadultoMacho" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="91" name="adultoMacho" value="0" /></td>
								</tr>
								<tr>
									<th><?php echo __("Hembra");?></th>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="22" name="indeterminadoHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="12" name="polloHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="32" name="jovenHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="52" name="segundoAnioHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="72" name="tercerAnioHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="82" name="inmaduroHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="82" name="subadultoHembra" value="0" /></td>
									<td style="text-align:center;"><input maxlength="4" class="input-mini" type="number" id="92" name="adultoHembra" value="0" /></td>
								</tr>
							</tbody>
						</table>
						<p class="help-block"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Rellene los cuadros correspondientes con el número de individuos observados.")?></p>
					</div>
			</div>

			<!-- Datos de reproducción -->
			<div class="control-group">
				<label class="control-label"><?php echo __("Datos de reproducción");?><br>(<?php echo __("Obligatorio");?>)</label>
					<div class="controls">
					<?php 
						foreach ($clasesReproduccion as $claseReproduccion) {
							echo '<label class="radio"><input name="datosReproduccion" value="'.$claseReproduccion["ClaseReproduccion"]["id"].'" type="radio"><b>'.$claseReproduccion["ClaseReproduccion"]["tipoCria"].'</b> - '.$claseReproduccion["ClaseReproduccion"]["descripcion"].'</label>';
						}
					?>
					<p class="help-block" style="margin-top: 20px;"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Seleccione una opción.")?></p>
					</div>
			</div>
			
			<!-- Otros datos -->
			<div class="control-group">
				<label class="control-label"><?php echo __("Otros datos");?><br>(<?php echo __("Opcional");?>)</label>
				<div class="controls">
					<label class="checkbox"> <input name="otrosDatos" value="vistoEnHabitatAtipico" type="checkbox"> <?php echo __("Especie vista en habitat atípico");?> </label> 
					<label class="checkbox"> <input name="otrosDatos" value="reproduccionHabitatAtipico" type="checkbox"> <?php echo __("Reproducción en un hábitat atípico");?> </label>
					<label class="checkbox"> <input name="otrosDatos" value="heridoAccidentadoMuerto" type="checkbox"> <?php echo __("Cita de individuo herido, accidentado o muerto");?> </label>
					<label class="checkbox"> <input name="otrosDatos" value="morfologiaCuriosa" type="checkbox"> <?php echo __("Comportamiento o morfología curiosa");?> </label>
				</div>
			</div>
			
			<!-- Observaciones -->
			<div class="control-group">
				<label class="control-label" for="observaciones"><?php echo __("Observaciones");?><br>(<?php echo __("Opcional");?>)</label>
				<div class="controls">
					<textarea id="observaciones" name="observaciones" style="width: 300px; height: 100px;"></textarea>
				</div>
			</div>
			
			<!-- Observadores -->
			<div class="row-fluid">
				<div class="control-group span5">
					<label class="control-label" for="observadores"><?php echo __("Observadores");?><br>(<?php echo __("Obligatorio");?>)</label>
					<div class="controls">
						<input id="observadores" name="observadores" class="input-xlarge" type="text">
						<input type="hidden" id="observadoresSeleccionados" name="observadoresSeleccionados" />
						<p class="help-block"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Escriba al menos tres letras. Los observadores seleccionados aparecerán en el cuadro contiguo.")?></p>
					</div>
				</div>
				<div class="control-group span1"><img alt="flecha derecha" src="/aoa/app/webroot/img/icons/arrow_sans_right.png"/></div>
				<div class="control-group span6">
					<label class="control-label" for="listaObservadoresSeleccionados"><?php echo __("Observadores seleccionados");?></label>
					<div class="controls">
						<div id="listaObservadoresSeleccionados" style="height: 100px; width: 300px; overflow: auto; margin-bottom: 5px;" class="ui-widget-content"></div>
						<button class="btn btn-warning btn-mini" type="button" id="btnVaciarObservadores"><i class="icon-trash" style="margin-right: 10px;"></i>Vaciar</button>
					</div>
				</div>
			</div>
			

			<!-- Adjuntar fotos -->
			<div class="control-group">
				<label class="control-label" for="imagen"><?php echo __("Adjuntar foto principal");?><br>(<?php echo __("Opcional");?>)</label>
				<div class="controls">
					<div class="fileupload fileupload-new" data-provides="fileupload">
						<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
							<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=Sin+imagen" />
						</div>
						<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
						<div>
							<span class="btn btn-file">
								<span class="fileupload-new"><?php echo __("Seleccione una imagen");?></span>
								<span class="fileupload-exists"><?php echo __("Cambiar");?></span>
								<input type="file" id="imagen" name="imagen" />
							</span>
							<a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><?php echo __("Borrar");?></a>
						</div>
					</div>
					<p class="help-block"><i class="icon-info-sign" style="margin-right: 10px;"></i><?php echo __("Seleccione la imagen principal de la cita. Una vez creada la cita podrá adjuntar más imágenes.")?></p>
				</div>
			</div>

			<!-- Button (Double) -->
			<div class="control-group">
				<div class="controls text-center">
					<button id="btnGuardar" name="btnGuardar" class="btn btn-large btn-primary"><?php echo __("Guardar");?></button>
				</div>
			</div>
		</form>

	</fieldset>
</div>

<div id="modalLugares" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLugares" aria-hidden="true"  style="width: 920px;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">×</button>
		<h3 id="myModalLugares">Seleccione un lugar</h3>
	</div>
	<div class="modal-body">
		<table id="tablaLugares" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th><?php echo __("Lugar");?></th>
					<th><?php echo __("Municipio");?></th>
					<th><?php echo __("Comarca");?></th>
					<th><?php echo __("Cuadrícula UTM");?></th>
				</tr>
			</thead>
			<tbody>
				<?php 
					foreach ($lugares as $lugar) {
						echo "<tr id='".$lugar["Lugar"]["id"]."'>";
						echo 	"<td>".$lugar["Lugar"]["nombre"]."</td>";
						echo 	"<td>".$lugar["Municipio"]["nombre"]."</td>";
						echo 	"<td>".$lugar["Comarca"]["nombre"]."</td>";
						echo 	"<td style='width:20px;'>".$lugar["CuadriculaUtm"]["codigo"]."</td>";
						echo "</tr>";
					}
				?>
			</tbody>
			<tfoot>
			<tr>
				<th><input type="text" name="buscarLugar" value="Buscar lugar..." class="search_init" /></th>
				<th><input type="text" name="buscarMunicipio" value="Buscar municipio..." class="search_init" /></th>
				<th><input type="text" name="buscarComarca" value="Buscar comarca..." class="search_init" /></th>
				<th><input type="text" name="buscarCuadriculaUtm" value="Buscar cuadrícula UTM..." class="search_init" /></th>
			</tr>
		</tfoot>
		</table>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
		<button class="btn btn-primary">Aceptar</button>
	</div>
</div>

<!-- Pie -->
<?php 
	$this->start('pie');		
	echo $this->element('/pie');
	$this->end(); 
?>

<!-- Popup Login -->
<?php 
	$this->start('popup_login');		
	echo $this->element('/popup_login');
	$this->end(); 
?>